<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Skjanyou直播</title>
		<style type="text/css">
			#screen {
				width:100%;
				height:100%;
			}
		</style>
	</head>
	<body>
		<canvas id="screen"></canvas>
	</body>
	<script>
		(function(){
			var flag = 1;
			var UTIL = {
				blobToDataURL : function(blob,callback){
					var reader = new FileReader();
					reader.readAsDataURL(blob);
					reader.onload = function(e){
						callback && callback( e.target.result );
					}
				},
				connectServer : function( path ){
					var websocket = new WebSocket( path );
					websocket.extensions = "skjanyou";
					websocket.onerror = function(){}
					websocket.onopen = function(){}
					websocket.onclose = function(){}
					return websocket;
				}
			};
			
			var canvas = document.getElementById("screen").getContext("2d");
			var websocket = UTIL.connectServer( "ws://127.0.0.1:8666" );
			websocket.onmessage = function(response){
				UTIL.blobToDataURL(response.data,function(dataUrl){
					var img = new Image();
					img.src = dataUrl;
					img.width = "1920px";
					img.height = "1080px";
					img.onload = function(){
						var width = img.width;
						var height = img.height;
						canvas.drawImage(img,0,0);
					}
				});
			}
			
		})();
	</script>
</html>
